<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>首页</title>
<script type="text/javascript" src="../../easyui/jquery.min.js"></script>
<!--引入JqueryEasyUI主文件-->
<script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script>
<!--easyui的各种主题文件-->
<link rel="stylesheet" type="text/css" href="../../easyui/themes/default/easyui.css">
<!--easyui的各种图标-->
<link rel="stylesheet" type="text/css" href="../../easyui/themes/icon.css">
<script type="text/javascript" src="../../easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
  		var url;
      function addUser(){
	  	 $("#dag").dialog({closed:false,title:"添加记录信息"});
		 url="${pageContext.request.contextPath}/pages/record/add.do";
	  }
	  function editUser(){
	  	 var row=$("#dg").datagrid("getSelected");
		 if(row){
		 $("#dlg").dialog({closed:false,title:"编辑记录信息"});
		  $("#fm").form("load",row);
		  url="${pageContext.request.contextPath}/pages/record/update.do";
		 }		 
	  }
	  function delUser(){
	  	 var rows=$("#dg").datagrid("getSelections");
		 if(rows.length>0){
			 var ids=[];  
			 for (var i = 0; i < rows.length; i++) {  
			                  //获取自定义table 的中的checkbox值  
			                var id=rows[i].recordId;   //OTRECORDID这个是你要在列表中取的单个id   
			           ids.push(id); //然后把单个id循环放到ids的数组中  
			                   }  
		 	$.messager.confirm('确认','您确认想要删除记录吗？',function(r){    
		    if (r){    
		        $.post('${pageContext.request.contextPath}/pages/record/delete.do',{"array[]":ids},function(data){
					//alert(data);
					if(data.result)
					{
						$("#dg").datagrid("reload");
					}else{
						
					}
					
				},"json");    
		    }    
		}); 
		 }
	  }
	  function saveUser(){
	  	$('#fm').form('submit', {    
		    url:url,    
		    onSubmit: function(){  
			  //表单验证  
		    },    
		    success:function(data){    
		       var data=eval("("+data+")");
			   if(data.result){
			   	  $('#dlg').dialog({closed:true});
				  $("#dg").datagrid("reload");
			   }   
		    }    
		}); 
	  }
	  function saveUser1(){
		  	$('#fm1').form('submit', {    
			    url:url,    
			    onSubmit: function(){  
				  //表单验证  
			    },    
			    success:function(data){    
			       var data=eval("("+data+")");
				   if(data.result){
				   	  $('#dag').dialog({closed:true});
					  $("#dg").datagrid("reload");
				   }   
			    }    
			}); 
		  }
	  function query(){
		  //获取输入的查询条件
		var para = $("#recordContent").val();
		var options = $("#dg").datagrid("getPager" ).data("pagination" ).options;  
		var page = options.pageNumber;
		var rows = options.pageSize;
	  	//利用ajax,来获取后台查询数据
			$.post("${pageContext.request.contextPath}/pages/record/mquery.do","page="+page+"&pageSize="+rows+"&keyWord="+para,function(data){
			//msg可以是AJAX返回的数据也可以自定义的JSON格式的字符串
			$('#dg').datagrid('loadData', JSON.parse(data));
		},"text");
	  }
	  function unselect() {
			$("#dg").datagrid("clearSelections");
			$("#dg").datagrid("unselectAll");
		  }
	</script>
</head>
<body>
	<table id="dg" class="easyui-datagrid" style="width:700px;height:350px"   
        data-options="url:'${pageContext.request.contextPath}/pages/record/mquery.do',
      					singleSelect:false,
			            fit:true,fitColumns:true,
			            pagination:true,
			            collapsible:true,
			            pagePosition : 'bottom',
	
						pageList : [ 2,5,6,8 ],
						pageSize : 5,
						checkOnSelect : true,
						selectOnCheck : true,
						toolbar:'#tb'">   
    <thead>   
        <tr>   
        <th data-options="field:'ck',checkbox:true"></th> 
            <th data-options="field:'recordId',width:100">id</th>   
            <th data-options="field:'recordContent',width:100">记录</th> 
        </tr>   
    </thead>   
   </table>  
   <div id="tb">
   	 <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="addUser()"> 新建</a>
	 <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="editUser()"> 编辑</a>
	 <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="delUser()"> 删除</a>
	 <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-undo'" onclick="unselect()"> 取消选中</a>
	 	 <form id="mm" method="post" style="display: inline-block;">
  	 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;模糊查询：<input type="text" id="recordContent" name="recordContent" placeholder="请输入"/>
  	  <a href="#" onclick="query()"  class="easyui-linkbutton">查询</a>
   </form> 
   </div>
   	 
<div id="dlg" class="easyui-dialog" style="width:290px;height:280px; background:gray" data-options="buttons:'#btns',closed:true">
   	   <form id="fm" method="post">
   	   	   <input type="text" style="display: none;"   name="recordId"/>
		   <textarea rows="10" cols="30" name="recordContent">记录：</textarea>		   <br/>
   	   </form>
   </div>
   <div id="dag" class="easyui-dialog" style="width:290px;height:280px; background:gray" data-options="buttons:'#btns1',closed:true">
   	   <form id="fm1" method="post">
   	 <textarea rows="10" cols="30" name="recordContent">记录：</textarea>		   <br/>
   	   </form>
   </div>
   <div id="btns">
   	<a href="#" class="easyui-linkbutton" onclick="saveUser()">更新</a>
	 <a href="#" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog({closed:true})">取消</a>
   </div>
   <div id="btns1">
   	<a href="#" class="easyui-linkbutton" onclick="saveUser1()">保存</a>
	 <a href="#" class="easyui-linkbutton" onclick="javascript:$('#dag').dialog({closed:true})">取消</a>
   </div>
</body>
</html>

